<template>
	<div class="setup">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
			<el-form-item label="业务联系人：" prop="businessContact">
				<el-input style="width: 380px" v-model="ruleForm.businessContact" placeholder="姓名" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessContactPhone">
				<el-input style="width: 380px" v-model="ruleForm.businessContactPhone" placeholder="电话" maxlength="15"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessContactMail">
				<el-input style="width: 380px" v-model="ruleForm.businessContactMail" placeholder="邮箱" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessContactWechat">
				<el-input style="width: 380px" v-model="ruleForm.businessContactWechat" placeholder="微信" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="商务联系人：" prop="businessRelation">
				<el-input style="width: 380px" v-model="ruleForm.businessRelation" placeholder="姓名" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessRelationPhone">
				<el-input style="width: 380px" v-model="ruleForm.businessRelationPhone" placeholder="电话"  maxlength="15"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessRelationMail">
				<el-input style="width: 380px" v-model="ruleForm.businessRelationMail" placeholder="邮箱" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="businessRelationWechat">
				<el-input style="width: 380px" v-model="ruleForm.businessRelationWechat" placeholder="微信" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="售后联系人：" prop="afterSale">
				<el-input style="width: 380px" v-model="ruleForm.afterSale" placeholder="姓名" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="afterSalePhone">
				<el-input style="width: 380px" v-model="ruleForm.afterSalePhone" placeholder="电话"  maxlength="15"></el-input>
			</el-form-item>
			<el-form-item label="" prop="afterSaleMail">
				<el-input style="width: 380px" v-model="ruleForm.afterSaleMail" placeholder="邮箱" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="" prop="afterSaleWechat">
				<el-input style="width: 380px" v-model="ruleForm.afterSaleWechat" placeholder="微信" maxlength="20"></el-input>
			</el-form-item>

			<el-form-item label="品类" prop="categorys">
				<el-cascader v-model="ruleForm.categorys" 
					:options="merCateList" :props="merCateOptions" clearable
					class="selWidth" :show-all-levels="false" />
			</el-form-item>

			<el-form-item label="品牌商标：" prop="brandImg">
				<UploadFile :value.sync="ruleForm.brandImg"/>
			</el-form-item>
			<el-form-item label="授权书：" prop="authorization">
				<UploadFile :value.sync="ruleForm.authorization"/>
			</el-form-item>
			<el-form-item label="行业资质：" prop="qualifications">
				<UploadFile tip="（3C认证）" :value.sync="ruleForm.qualifications"/>
			</el-form-item>
			
			<el-form-item label="入驻协议：" prop="enterAgreement">
				<UploadFile tip="（协议模版下载）" :value.sync="ruleForm.enterAgreement"/>
			</el-form-item>
			
			<el-form-item>
				<el-button @click="saveData(0)" :loading="setupSaveLoading" :disabled="completeLoading">保存草稿</el-button>
				<el-button type="primary" :loading="completeLoading" @click="submitForm('ruleForm')" :disabled="setupSaveLoading">完成</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import UploadFile from '@/components/courtship/UploadFile.vue'
import {validTel,validMail} from '@/utils/validate.js';
import {categoryApi} from '@/api/user.js'

export default {
	props: ['data','draft','setupSaveLoading','completeLoading'],
	name: 'SetupTwo',
	data(){
		return{
			isSaveLoading: false,
			merCateList: [],
			merCateOptions:{
				children: 'child',
				label: 'name',
				value: 'id',
				multiple: true,
				emitPath: false
			},
			ruleForm: {
				categorys: [], //品类数组
				businessContact: '', //业务姓名
				businessContactPhone: '', //业务电话
				businessContactMail: '', //业务邮箱
				businessContactWechat: '', //业务微信
				businessRelation: '', //商务姓名
				businessRelationPhone: '', //商务电话
				businessRelationMail: '', //商务邮箱
				businessRelationWechat: '', //商务微信
				afterSale: '', //售后姓名
				afterSalePhone: '', //售后电话
				afterSaleMail: '', //售后邮箱
				afterSaleWechat: '', //售后微信
				brandImg: '',//品牌商标
				authorization: '',//授权书
				qualifications: '', //行业资质
				enterAgreement: '', //入驻协议
			},
			rules:{
				businessContact: [
					{ required: true, message: '请输入业务姓名', trigger: 'blur' },
				],
				businessContactPhone: [
					{ required: true, message: '请输入业务电话', trigger: 'blur' },
					{validator: validTel, trigger: 'blur' }
				],
				businessContactMail: [
					{ required: true, message: '请输入业务邮箱', trigger: 'blur' },
					{validator: validMail, trigger: 'blur' }
				],
				businessContactWechat: [
					{ required: true, message: '请输入业务微信', trigger: 'blur' },
				],
				businessRelation: [
					{ required: true, message: '请输入商务姓名', trigger: 'blur' },
				],
				businessRelationPhone: [
					{ required: true, message: '请输入商务电话', trigger: 'blur' },
					{validator: validTel, trigger: 'blur' }
				],
				businessRelationMail: [
					{ required: true, message: '请输入商务邮箱', trigger: 'blur' },
					{validator: validMail, trigger: 'blur' }
				],
				businessRelationWechat: [
					{ required: true, message: '请输入商务微信', trigger: 'blur' },
				],
				afterSale: [
					{ required: true, message: '请输入售后姓名', trigger: 'blur' },
				],
				afterSalePhone: [
					{ required: true, message: '请输入售后电话', trigger: 'blur' },
					{validator: validTel, trigger: 'blur' }
				],
				afterSaleMail: [
					{ required: true, message: '请输入售后邮箱', trigger: 'blur' },
					{validator: validMail, trigger: 'blur' }
				],
				afterSaleWechat: [
					{ required: true, message: '请输入售后微信', trigger: 'blur' },
				],
				categorys: [
					{ required: true, message: '请选择品类', trigger: 'blur' },
				],
				brandImg: [
					{ required: true, message: '请传入品牌商标', trigger: 'blur' },
				],
				authorization: [
					{ required: true, message: '请传入授权书', trigger: 'blur' },
				],
				qualifications: [
					{ required: true, message: '请传入行业资质', trigger: 'blur' },
				],
				enterAgreement: [
					{ required: true, message: '请传入入驻协议', trigger: 'blur' },
				],
			}
		}
	},
	mounted(){
		const data = {...this.draft};
		if(data.categorys){
			data.categorys = data.categorys.split(',');
		}
		this.ruleForm =Object.assign(this.ruleForm,data);
		this.getCategorySelect();
	},
	components:{
		UploadFile,
	},
	methods:{
		submitForm(dom){
			this.$refs[dom].validate(async (valid) => {
				if (valid) {
					this.saveData(2);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		async getCategorySelect() {
			const res = await categoryApi({type: 1,status: 1,level: 0});
			this.merCateList = res;
		},
		async saveData(setup) {
			const params = {...this.ruleForm};
			if(params.categorys){
				params.categorys = params.categorys.join(',');
			}
			this.$emit('saveFile',{params,setup});
		},
	}
}
</script>

<style>

</style>